<template>
	<view class="uni-steps" >
		<view class="uni-steps__row">
			<view class="uni-steps__row-container">
				
				<view class="uni-steps__row-line-item" >
					<block v-for="(item,index) in options" :key="index">


					 
					 <view class="uni-steps__row-line uni-steps__row-line--after"
					 :style="{backgroundColor:activeColor}"/>
					 
					 <view :class="item.isflag ? 'uni-steps__row-circle-new' : 'uni-steps__row-circle-color'"/>
					 
<!-- 					 <view class="uni-steps__row-line uni-steps__row-line--before"
					  :style="{backgroundColor:item.isflag&&index!==0?activeColor:index===0?'transparent':deactiveColor}"></view> -->

					 <view class="uni-steps__row-line uni-steps__row-line--after"
					 :style="{backgroundColor:activeColor}"/>
					<!--  -->


					</block>
					
					<!--  <view :class="true ? 'uni-steps__row-circle-new' : 'uni-steps__row-circle-color'"></view>
					   <view :class="change ? 'uni-steps__row-circle-new' : 'uni-steps__row-circle-color'"></view>
					    <view :class="false ? 'uni-steps__row-circle-new' : 'uni-steps__row-circle-color'"></view>
						 <view :class="false ? 'uni-steps__row-circle-new' : 'uni-steps__row-circle-color'"></view> -->
<!-- 					<view class="uni-steps__row-check" v-if="2 === active">
						
					</view> -->

					
				</view>
<!-- 				<view class="uni-steps__row-line-item" v-for="(item,index) in options" :key="index">
					<view 
					class="uni-steps__row-line uni-steps__row-line--before"
					 :style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent'
					 :deactiveColor}">
					 </view>
					 
					<view class="uni-steps__row-check" v-if="index === active">
						<uni-icons :color="activeColor" type="../../static/img/mine/Select-the-chart.png" size="14"></uni-icons>
					</view> -->
					
					<!-- uni-steps__row-circle-new -->
					<!-- 重 -->	
						<!-- :style="{backgroundColor:index<active?activeColor:deactiveColor}" -->
						
<!-- 					<view :class= "true ? 'uni-steps__row-circle': 'uni-steps__row-circle-new'" 
					v-else
						
					>
					</view>
					<view class="uni-steps__row-line uni-steps__row-line--after"
					:style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}"></view>
					
				</view> -->
				
			</view>
			<view class="uni-steps__row-text-container">
				<view v-for="(item,index) in options" :key="index" class="uni-steps__row-text">
					<text :style="{color:item.isflag?activeColor:deactiveColor}" class="uni-steps__row-title">{{item.title}}</text>
					<text :style="{color:index<=active?activeColor:deactiveColor}" class="uni-steps__row-desc">{{item.desc}}</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import uniIcons from './uni-icons.vue'
	export default {
		name: 'UniSteps',
		components: {
			uniIcons
		},
		props: {
			direction: {
				// 排列方向 row column
				type: String,
				default: 'row'
			},
			activeColor: {
				// 激活状态颜色
				type: String,
				default: '#FF5E04'
			},
			img:{
				type: String,
				default: '../../static/img/mine/Select-the-chart.png'
			},
			deactiveColor: {
				// 未激活状态颜色
				type: String,
				default: '#999999'
			},
			active: {
				// 当前步骤
				type: Number,
				default: 0
			},
			change:{
				type: Boolean,
				
			},
			options: {
				type: Array,
				default () {
					return []
				}
			} ,// 数据
			
		},
		data() {
			return {
				
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.uni-steps {
		/* #ifndef APP-NVUE */
		display: flex;
		width: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
		flex-direction: column;
	}

	.uni-steps__row {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.uni-steps__column {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row-reverse;
	}

	.uni-steps__row-text-container {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		margin-top: 35upx;
	}

	.uni-steps__column-text-container {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		flex: 1;
	}

	.uni-steps__row-text {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		flex: 1;
		flex-direction: column;
	}

	.uni-steps__column-text {
		padding: 6px 0px;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: $uni-border-color;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.uni-steps__row-title {
		font-size:22upx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(143,143,143,1);
		line-height: 16px;
		text-align: center;
	}

	.uni-steps__column-title {
		font-size: $uni-font-size-base;
		text-align: left;
		line-height: 18px;
	}

	.uni-steps__row-desc {
		font-size: 12px;
		line-height: 14px;
		text-align: center;
	}

	.uni-steps__column-desc {
		font-size: $uni-font-size-sm;
		text-align: left;
		line-height: 18px;
	}

	.uni-steps__row-container {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.uni-steps__column-container {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		width: 30px;
		flex-direction: column;
	}

	.uni-steps__row-line-item {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		flex-direction: row;
		flex: 1;
		height: 14px;
		line-height: 14px;
		align-items: center;
		justify-content: center;
		
	}

	.uni-steps__column-line-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		flex: 1;
		align-items: center;
		justify-content: center;
	}

	.uni-steps__row-line {
		
		flex: 1;
		height: 1px;
		background-color: $uni-text-color-grey;
	}

	.uni-steps__column-line {
		width: 1px;
		background-color: $uni-text-color-grey;
	}

	.uni-steps__row-line--after {
		transform: translateX(-1px);
	
	}

	.uni-steps__column-line--after {
		flex: 1;
		transform: translate(0px, 1px);
	}

	.uni-steps__row-line--before {
		transform: translateX(-1px);
	}

	.uni-steps__column-line--before {
		height: 6px;
		transform: translate(0px, -1px);
	}

	// .uni-steps__row-circle {
	// 		width: 35px;
	// 		height: 35px;
	// 		background:url(../../static/img/mine/no-Select-the-chart.png) no-repeat; 
	// 		background-size: 100% 100%;
	// 		border-radius: 52%;
	// }
	.uni-steps__row-circle-color{
		width: 35px;
		height: 35px;
		background:url(../../static/img/mine/no-Select-the-chart.png) no-repeat; 
		background-size: 100% 100%;
		border-radius: 52%;

	}
	.uni-steps__row-circle-new {
			width: 35px;
			height: 35px;
			background:url(../../static/img/mine/Select-the-chart.png) no-repeat; 
			background-size: 100% 100%;
			border-radius: 52%;
			
			

	}
	// .uni-steps__row-circle-new-old{
	// 	width: 35px;
	// 	height: 35px;
	// 	background:url(../../static/img/mine/Select-the-chart.png) no-repeat; 
	// 	background-size: 100% 100%;
	// 	border-radius: 52%;
		
		


	// }
	.uni-steps__column-circle {
		width: 5px;
		height: 5px;
		border-radius: 100px;
		background-color: $uni-text-color-grey;
		margin: 4px 0px 5px 0px;
	}

	.uni-steps__row-check {
		margin: 0px 6px;
	}

	.uni-steps__column-check {
		height: 14px;
		line-height: 14px;
		margin: 2px 0px;
	}
</style>
